<template>
  <div class="box" ref="box">

    <div id="search">
      <img src="/img/logo.png" alt="">
      <van-search
          v-model="value"
          shape="round"
          background="rgb(227,3,3)"
          placeholder="请输入搜索关键词"
      />
    </div>
    <van-notice-bar scrollable text="社会主义核心价值观：富强、民主、文明、和谐；自由、平等、公正、法制；爱国、敬业、诚信、友善！" />

    <div v-show="value == ''">
        <div class="skeleton" v-show="$store.state.slideshowFlag == false">
          <a-spin tip="Loading...">
            <div class="spin-content">
              正在载入。。。
            </div>
          </a-spin>
        </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-show="$store.state.slideshowFlag">
        <van-swipe-item v-for="item in $store.state.slideshowList" :key="item.articleId"  @click="toDetail(item.articleId)" :style="'background-image: url('+item.imgList+')'" class="slideshow"></van-swipe-item>
      </van-swipe>
      <van-tabs v-model="$store.state.tabActive" @change="onClick">
        <Recommend></Recommend>
        <van-tab v-for="item in $store.state.classifyList" :key="item.articleId" :title="item.name" :name="item.categoryId">
          <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad(item.categoryId)"
          >
            <van-cell class="more">
              <newsLi :newsList="newsList"></newsLi>
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <div v-show="value != ''">
      <h2 v-show="!flag">
        请换个<span>关键字</span>试试看吧！
        <br>
        <img src="https://y0.zzzyk.com/201359/20100308063554.gif" alt="">
      </h2>
      <div v-show="flag">
        <h1>搜索结果如下:</h1>

        <van-list
            v-model="loading1"
            :finished="finished1"
            finished-text="没有更多了"
            @load="onLoad1"
        >
          <van-cell class="more">
            <searchNewsLi :newsList="searchNewsList"></searchNewsLi>
          </van-cell>
        </van-list>

      </div>
    </div>
  </div>
</template>

<script>
import {getNewsClassify, getNewsId, getSlideshow, searchNews, subscriptionlist} from "@/http/api";
import Recommend from "@/components/Recommend";
import newsLi from "@/components/newsLi";
import { Toast } from 'vant';
import searchNewsLi from "@/components/searchNewsLi";
export default {
  name: "Index",
   data() {
    return {
      active:6,
      value: '',
      //轮播图列表
      slideshowList:[],
      newsList:[],
      //搜索结果列表
      searchNewsList:[],
      flag:true,
      //请求新闻的个数
      num:10,
      searchNum:10,
      //轮播图是否请求成功
      // 触底加载
      loading: false,
      finished: false,
      loading1: false,
      finished1: false,
    };
  },
  methods:{
    //跳转到详情
    toDetail(articleId){
      sessionStorage.removeItem('value')
      this.$router.push({path:'/detail',query:{articleId:articleId}})
    },
    onClick(name, title) {
      //将点击的标签激活页保存本地
      // sessionStorage.removeItem('active')
      sessionStorage.removeItem('tabActive')
      // sessionStorage.setItem('active',String(name))
      sessionStorage.setItem('tabActive',String(this.$store.state.tabActive))
      this.newsList = []
      this.num = 10
      Toast(title);
      getNewsId(name,this.num).then(res=>{
        // console.log(res)
        this.newsList = res.data.rows
      })
    },
    //加载更多新闻事件
    onLoad(categoryId) {
      // 异步更新数据
      this.num += 10
      sessionStorage.removeItem('num')
      sessionStorage.setItem('num',String(this.num))
      getNewsId(categoryId,this.num).then(res=>{
        this.newsList = res.data.rows
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.newsList.length >= 100) {
          this.finished = true;
        }
      })
    },
    //加载更多搜索结果的新闻
    onLoad1() {
      // 异步更新数据
      this.searchNum += 10
      searchNews(this.value,this.searchNum).then(res=>{
        this.searchNewsList = res.data.rows
        // 加载状态结束
        this.loading1 = false;
        // 数据全部加载完成
        if (this.searchNewsList.length >= 100) {
          this.finished1 = true;
        }
      })
    },
  },
  components:{
    Recommend,
    newsLi,
    searchNewsLi
  },
  created() {
    this.$store.state.advertising = false
    //获取轮播图
    getSlideshow().then(res=>{
      // console.log(res)
      this.$store.commit('changeSlideshowList',res.data.rows)
      // this.slideshowList = res.data.rows
      this.$store.commit('changeSlideshowFlag',true)
    })
    if (this.$store.state.isLogin) {
      //获取新闻分类列表
      getNewsClassify().then(res=>{
        // console.log(res)
        this.$store.commit('changeClassifyList',res.data.rows.splice(0,17))
        //保存本地再去除赋值给active！！
        this.value = sessionStorage.getItem('value')
        if (sessionStorage.getItem('tabActive') != null) {
          // this.active =Number(sessionStorage.getItem('active'))
          this.$store.commit('changeTabActive',Number(sessionStorage.getItem('tabActive')))

          this.num =Number(sessionStorage.getItem('num'))
          // getNewsId(this.active,this.num).then(res=>{
          getNewsId(this.$store.state.tabActive,this.num).then(res=>{
            this.newsList = res.data.rows
            this.getMoreing = false
          })
        }
      })
    } else {
      // this.value = sessionStorage.getItem('value')
      subscriptionlist().then(res => {
        this.$store.commit('changeClassifyList',res.data.rows)

        this.value = sessionStorage.getItem('value')


        //保存本地再去除赋值给active！！
        // if (sessionStorage.getItem('active') != null) {
        if (sessionStorage.getItem('tabActive') != null) {
          // this.active =Number(sessionStorage.getItem('active'))
          this.$store.commit('changeTabActive',Number(sessionStorage.getItem('tabActive')))

          this.num =Number(sessionStorage.getItem('num'))
          // getNewsId(this.active,this.num).then(res=>{
          getNewsId(this.$store.state.tabActive,this.num).then(res=>{
            this.newsList = res.data.rows
            this.getMoreing = false
          })
        }
      })
    }


  },
  mounted() {

  },
  watch:{
    value:function (){
      if (this.value != '') {
        sessionStorage.removeItem('value')
        sessionStorage.setItem('value',this.value)
        searchNews(this.value,this.searchNum).then(res=> {
          // console.log(res)
          this.searchNewsList = res.data.rows
          if(this.searchNewsList.length == 0){
            this.flag = false
          } else {
            this.flag = true
          }
        })
      } else {
        // this.active =Number(sessionStorage.getItem('active'))
        this.$store.commit('changeTabActive',Number(sessionStorage.getItem('tabActive')))
        sessionStorage.removeItem('value')
        this.searchNum = 10

      }
    },
  },

}
</script>

<style scoped lang="less">
.box {
  padding-bottom: 70px;
}
.skeleton {
  height: 200px;
  div {
    height: 200px!important;
  }
}
.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
}
.my-swipe .van-swipe-item {
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.slideshow {
  height: 200px;
  background-size: 100% 100%;
}
h2 {
  margin-top: 100px;
  text-align: center;
  >span {
    font-size: 22px;
    color: red;
  }
  >img {
    width: 250px;
    margin-top: 30px;
  }
}
h1 {
  padding: 15px;
  margin: 0;
}
.more {
  padding: 0!important;
}
//搜索框的改变
#search {
  display: flex;
  background-color: rgb(227,3,3);
  >img {
    height: 40px;
    flex-grow: 0;
    margin-top: 8px;
  }
  >div {
    flex-grow: 1;
  }
  //width: 80%;

}
</style>